<template>
	
	<view class="page">
	    <!-- 订单状态标签 -->
	    <view class="order-status-tabs">
	      <text :class="{ active: currentTab === 'all' }"      @click="changeTab('all')">全部订单</text>
	      <!-- <text :class="{ active: currentTab === 'unpaid' }"   @click="changeTab('unpaid')">待支付</text> -->
	      <text :class="{ active: currentTab === 'paid' }"     @click="changeTab('paid')">已支付</text>
	      <text :class="{ active: currentTab === 'waitrefunded' }" @click="changeTab('waitrefunded')">待退款</text>
	      <text :class="{ active: currentTab === 'refunded' }" @click="changeTab('refunded')">已退款</text>
	    </view>
	
	<view  class="container">
	    <!-- 订单列表 -->
	    <view class="order-list">
			
			
			
	      <block v-for="(order, index) in order_list_fliter" :key="index">
	        <view class="order-item">
	          <view class="order-header">
	            <text>订单编号：{{ order.order_sn }}</text>
	            <text>{{ order.add_date }}</text>
	          </view>
	          <view class="order-content">
	            <image :src="order.productImage" mode="aspectFill"></image>
	            <view class="order-details">
	              <view class="title">{{ order.order_name }}</view>
	              <view class="amount">{{ order.amount }}</view>
	              <view class="total">合计：¥{{ order.order_price }}</view>
	            </view>
	          </view>
			  
	          <view class="order-footer">
	            <text> 学生：{{ order.student_name }} </text>
				<view >{{ order.student_info }}</view>
	          </view>
	 
			  
			  <view class="order-function">
			    <view class="action-buttons">
					 
					 <!-- 1=已付款，可以申请退款 -->
					 <view class="action-button" v-if="order.pay_status == 1">
						 <button size="mini"   @click="refundOrder(order)">申请退款</button>
						 <text>{{order_status[order.pay_status]}}</text>
					 </view>
					 
					 <!-- 2=等退款，没操作 -->
					<text v-if="order.pay_status == 2">{{order_status[order.pay_status]}}</text>
					 
					<!-- 3=已退款，没操作 -->
					<text v-if="order.pay_status == 3">{{order_status[order.pay_status]}}</text>

					 <!-- 0=待付款，不给操作了 -->
					 <text v-if="order.pay_status == 0">已失效</text>
		 
			    </view>
			  </view>
			  
			  
			  
	        </view>
	      </block>
	    </view>
		
		</view>

        <u-overlay :show="covershow" @click="covershow = false"></u-overlay> 
		<u-modal :show="show" :title="title" @confirm="confirm" @cancel="cancel_confirm" :showCancelButton=true :content='content'></u-modal>
	  
	  
	   
	  <EmptyData v-if="this.order_list_fliter.length == 0" />
	  
	  </view>
	  
	  


</template>

<script>
	import * as Config from '@/utils/config.js';
	import * as SettingApi from "@/api/setting.js";
	import * as UserApi from '@/api/user.js';
	import EmptyData from '@/components/common/EmptyData.vue'
	import * as EventApi from '@/api/event.js'
	import * as order_api from '@/api/order.js'
 
	export default {
				components: {
					EmptyData
				},
	  data() {
	    return {
			covershow:false,
			show:false,
			title:'申请退款',
			content:'请点击确认，申请退款',
			//0待付款 1已付款 2已退款  3待退款
			tab_order_status: {
			    unpaid: 0,
			    paid: 1,
			    refunded: 2,
			    waitrefunded: 3
			},
			order_status:['待付款','已付款','已退款','待退款','已取消'],
	        currentTab: 'all',
	        orders: [ ],
			order: [ ],
			return_order_id:"",
			order_on_tab:1
	    };
	  },
	onShow() {
		if (uni.getStorageSync('user_id')) 
		{
			this.isLogin = true
			  	  
			console.log("登陆了",uni.getStorageSync('user_id'))
			
			this.order_list();
			  	  
		}
		else if (!this.isLogin) 
		{
			uni.navigateTo({
				url: "/pages/login/index"
			}) 
			console.log("还没登陆")
			
		} 
		} ,
	 
 
	  onLoad(e) {
	  	  
	  	  			if (uni.getStorageSync('user_id')) {
	  	  				this.isLogin = true
	  	  
	  	  				console.log("登陆了",uni.getStorageSync('user_id'))
						
						this.order_list();
	  	  
	  	  			}
	  	  			else if (!this.isLogin) {
	  	  				uni.navigateTo({
	  	  					url: "/pages/login/index"
	  	  				}) 
	  	  				console.log("还没登陆")
						
	  	  			} 
	  	  			} ,
					
					onPullDownRefresh() {
						this.order_list();
					}, 
					
					
	  computed: {
		//根据以来的值，自己计算
	    order_list_fliter() {
	      if (this.currentTab === 'all') {
	        return this.orders;
	      } 
		  else {
			  console.log(this.tab_order_status[this.currentTab]);
			  console.log(this.orders);
		 
		 this.order_on_tab =this.orders.filter(order => order.pay_status == this.tab_order_status[this.currentTab])
	        return this.orders.filter(order => order.pay_status == this.tab_order_status[this.currentTab]);
	      }
	    }
	  },
	  methods: {
		  
		  order_list(){
	 
			const user_nid = uni.getStorageSync('user_id')
			  
			  // 创建一个参数对象，包含 nid 参数
			const params = {
				user_id: user_nid,
				data_type: 'all'
			};
						
			  console.log(user_nid);
			  
			  order_api.order_list(params).then(res => {
			  	this.orders = res.data;
				console.log(this.orders);
			  })
		  },
		  
		  //申请退款
 
		  refundOrder(order) {
		    console.log('申请退款:', order);
		    this.show = true;//实际请退款改变状态后，再弹出。
			
			this.return_order_id=order.order_id;
			this.order=order;
			console.log(this.return_order_id);
			console.log(order); 
		    
		  },
		  
		  //确认退款
		  confirm() {
			  this.show = false;
				const order_detail = {
					order_id:this.return_order_id,
					order_status:2
				}
				console.log(order_detail);
			    order_api.order_refund(order_detail).then(res => {
			  	console.log("退款反馈",res);
				if(res.code == 200){
					uni.showToast({
						title: '已经申请退款，请等待工作人员联系',
						icon: 'success',
						duration: 2000,
						  mask: true // 防止用户在提示框显示期间操作页面
					});
					
					// 延迟隐藏提示框
					setTimeout(() => {
					  uni.hideToast();
					  this.order_list();
					  console.log('提示框已隐藏，执行后续任务');
					  // 在这里执行你需要的任务
					}, 2000); // 延迟时间与 duration 一致
 
				}
				else{
					uni.showToast({
						title: '退款失败',
						icon: 'error'
					});
				}
				
				}) 
		  },
		 
		 cancel_confirm(){
			this.show = false;
			this.covershow = false;//实际请退款改变状态后，再弹出。
			},
			
		//改变tab
	    changeTab(tab) {
	      this.currentTab = tab;
		  console.log(this.currentTab);
		  console.log("this.order_list_fliter.length",this.order_list_fliter.length);
	    },
		
		
		
	
	    cancelOrder(order) {
	      console.log('取消订单:', order);
	    },
 
	  }
	};
	</script>

<style scoped lang="scss">
	
		@import url("asset/style.css");
	 
</style>